<template>
  <div class="mainContent">
    <div :class="['inputWrapper',status==='small'&&'smallInputWrapper']">
      <el-input placeholder="输入关键词" v-model="inputVal" class="input-with-select mainInput">
        <el-button class="selectInput" slot="prepend" @click="showType()">筛选类别
          <i class="el-icon-arrow-down el-icon--right icon-space" v-if="isShowChooseList"></i>
          <i class="el-icon-arrow-right el-icon--right icon-space" v-else></i>
        </el-button>
        <el-button class="searchInput" slot="append" icon="el-icon-search" @click="search">搜索</el-button>
      </el-input>
    </div>
    <el-collapse-transition>
      <div class="typeListWrapper" ref="typeList" v-if="isShowChooseList">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="最低评级" name="first">
            <ul class="typeList">
              <li :class="[currentType==item.id&&'active']" v-for="item in level" :key="'level'+item.id"
                  @click="handleChoose('type',item)">
                {{item.name}}
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="行业类别" name="second">
            <ul class="typeList">
              <li :class="[currentLevel===item.id&&'active']" v-for="item in type" :key="'type'+item.id"
                  @click="handleChoose('level',item)">{{item.name}}
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
        <div class="submitWrapper">
          <button class="submitBtn" @click="search">确定</button>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>

    export default {
        name: 'inputWrapper',
        props: {
            status: {
                type: String,
                default: 'normal'
            }
        },
        data() {
            return {
                level: [
                    {
                        id: 1,
                        name: '一级'
                    },
                    {
                        id: 2,
                        name: '二级'
                    },
                    {
                        id: 3,
                        name: '三级'
                    },
                    {
                        id: 4,
                        name: '四级'
                    },
                    {
                        id: 5,
                        name: '五级'
                    },
                    {
                        id: 6,
                        name: '六级'
                    },
                    {
                        id: 7,
                        name: '七级'
                    },
                    {
                        id: 8,
                        name: '八级'
                    },
                    {
                        id: 9,
                        name: '九级'
                    },
                    {
                        id: 10,
                        name: '十级'
                    }],
                type: [
                    {
                        id: 1,
                        name: '工程设计类'
                    },
                    {
                        id: 2,
                        name: '工程承包类'
                    },
                    {
                        id: 3,
                        name: '设备物资类'
                    },
                    {
                        id: 4,
                        name: '法律服务类'
                    },
                    {
                        id: 5,
                        name: '财务审计类'
                    },
                    {
                        id: 6,
                        name: '资产评估类'
                    },
                    {
                        id: 7,
                        name: '劳务派遣类'
                    },
                    {
                        id: 8,
                        name: '其他类'
                    }
                ],
                activeName: 'first',
                isShowChooseList: false,
                inputVal: '',
                currentType: 1,
                currentLevel: 1,
                chooseData: {}
            }
        },
        methods: {
            handleClick() {

            },
            handleChoose(status, item) {
                if (status === 'type') {
                    this.currentType = item.id
                    this.chooseData.type = item.id
                } else {
                    this.currentLevel = item.id
                    this.chooseData.level = item.id
                }
            },
            showType() {
                this.chooseData = {}
                this.isShowChooseList = !this.isShowChooseList
            },
            search() {
                this.chooseData.search_value = this.inputVal
                this.$parent.submitSearch(this.chooseData)
                this.isShowChooseList = false
            }
        }
    }
</script>

<style lang="less">
  @import "index.less";
</style>
